<template>
	<view v-if="isShow" @touchmove.stop.prevent="stopTouchMove">
		<view class="search-wrap">
			<!-- 搜索框 -->
			<view class="index-search-box d-b-c" id="searchBox"
				:style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;padding-right: 200rpx'">
				<view class="reg180" :style="topBarHeight() == 0 ? '' : 'height:' + topBarHeight() + 'px;'">
					<text @click="closeSearch" class="icon iconfont icon-jiantou"></text>
				</view>
				<!-- <view class="index-search t-c flex-1" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
					<text class="icon iconfont icon-sousuo"></text>
					<input type="text" v-model="form.keyWord" class="flex-1 ml10 f30 gray3" value=""
						placeholder-class="f24 gray6" placeholder="输入你要的商品" confirm-type="search" @confirm="search()" />
				</view> -->

				<u-search placeholder="输入你要的商品" bgColor="#fff" v-model="form.keyWord" @clear="btnEmpty" @custom="search()"
					@search="search()"></u-search>
			</view>
			<view class="p-0-20 bg-white">
				<view class="group-hd">
					<view class="left"><text class="min-name">最近搜索</text></view>
					<view class="right">
						<text class="icon iconfont icon-lajitong" @click='clearStorage'></text>
					</view>
				</view>
				<view class="before-search">
					<text class="item" v-for="(item, index) in arr" :key="index" @click="search(arr[index])">{{ arr[index]
					}}</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {

			},
			arr: [],
		}
	},
	mounted() {
		/*获取缓存数据*/
		this.getData();
	},
	props: ['isShow'],
	methods: {
		/*获取缓存里的搜索历史*/
		getData() {
			let self = this;
			/*获取搜索记录*/
			uni.getStorage({
				key: 'search_list',
				success: function (res) {
					if (res != null && res.data != null) {
						self.arr = res.data;
					}
				}
			});

		},

		// 清空搜索框
		btnEmpty() {
			this.form.keyWord = '';
		},


		/* 禁止手动滑动 */
		stopTouchMove() {
			return true
		},
		/*搜索*/
		search(str) {
			let self = this;
			let search = null;
			if (str != null) {
				search = str;
			} else {
				search = this.form.keyWord;
				let arrs = this.arr;
				if (typeof search != "undefined" && search != null && search != '') {
					arrs.push(search);
				} else {
					uni.showToast({
						title: '请输入搜索的关键字',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				/*设置搜索记录*/
				uni.setStorage({
					key: 'search_list',
					data: arrs,
					success: function () {
						console.log('success');
					}
				});
			}
			let category_id = 0;
			let sortType = 'all';

			self.gotoPage('/pages/product/list/list?search=' + search + '&category_id=' + category_id + '&sortType=' +
				sortType);

		},
		/*清楚缓存*/
		clearStorage() {
			let self = this;
			uni.removeStorage({
				key: 'search_list',
				success: function (res) {
					self.arr = [];
				}
			});
		},
		closeSearch() {
			this.$emit('close')
		}
	},
}
</script>

<style>
	.search-wrap {
		position: fixed;
		z-index: 999;
		top: 0rpx;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #f5f5f5;
	}

.search-wrap .index-search-box .search-box {
	line-height: 64rpx;
	background: #F5F5F5;
	border-radius: 50rpx;
	overflow: hidden;
	font-size: 28rpx;
	color: #999;
	box-sizing: border-box;
}

.search-wrap .index-search-box button {
	height: 78rpx;
	line-height: 78rpx;
	border: solid 1rpx #CCCCCC;
	color: #333333;
	background: #FFFFFF;
}

.search-wrap .index-search-box {
	background-color: #F5F5F5;
}

.before-search {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-flow: wrap;
}

.before-search .item {
	padding: 16rpx;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
	border-radius: 8rpx;
	color: #686868;
	background: #f0f2f5;
	font-size: 24rpx;
}

.reg180 {
	padding-left: 20rpx;
	text-align: center;
	transform: rotateY(180deg);
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.reg180 .icon-jiantou {
	color: #333333;
	display: block;
	width: 44rpx;
	height: 44rpx;
	line-height: 44rpx;
	font-size: 36rpx;
}
</style>
